<template>
    <div class="show">
        <span class="show-item" v-for="(item, index) in topPlayers" :key="item.player_id" :style="{ backgroundImage: `url(${getInfoBadge(`${index + 1}-1.png`)})` }">
            <img class="decoration" :src="getInfoBadge(`${index + 1}-2.png`)"/>
            <img class="show-avatar" :src="item.avatar || getDefaulteAvatar()" />
            <div class="show-number">{{`第 ${index + 1} 名`}}</div>
            <div class="show-name">{{ item.player_name }}</div>
            <div class="show-grade">
                <img class="show-badge" :src="playerBadges[item.player_id]?.badge || getBadge(15000)" alt="徽章">
                <!-- <span class="title">{{ playerBadges[item.player_id]?.title }}</span> -->
            </div>
            <div class="show-score">{{ item.points }} </div>
        </span>
    </div>
</template>

<script setup lang="ts">
import { getBadge, getLevel } from '@/utils/playerBox'
import { defineProps, watch, ref } from 'vue'
import getApi from '@/api/modules/get';

interface Player {
    player_id: string;
    player_name: string;
    avatar?: string;
    points: number;
}

const props = defineProps({
    topPlayers: {
        type: Array as () => Player[],
        default: () => [],
        required: true    
    },
    game_id: {
        type: Number,
        default: 1,
        required: true
    }
})

const playerBadges = ref<Record<string, any>>({})

// 获取单个玩家徽章
async function getSeasnBadge(userid_platform: string, game_id: number): Promise<any> {
    try {
        let res = await getApi.getPlayerSeasonData({ userid_platform, game_id })
        let _points = 0
        if (res.status == 200) {
            _points = res.data.data.points;
        }
        return { badge: getBadge(_points), title: getLevel(_points) }
    } catch (error) {
        return { badge: getBadge(0), title: getLevel(0) }
    }
}

// 批量加载所有玩家的徽章
async function loadPlayerBadges() {
    const badgePromises = props.topPlayers.map(async (player) => {
        const { badge, title} = await getSeasnBadge(player.player_id, props.game_id)
        return { playerId: player.player_id, badge, title }
    })
    
    const results = await Promise.all(badgePromises)
    
    // 更新响应式对象
    results.forEach(({ playerId, badge, title }) => {
        playerBadges.value[playerId] = { badge, title };
    })
}

// 监听 topPlayers 变化，重新加载徽章
watch(() => props.topPlayers, async (newPlayers) => {
    if (newPlayers && newPlayers.length > 0) {
        await loadPlayerBadges()
    }
}, { immediate: true })

// 监听 game_id 变化，重新加载徽章
watch(() => props.game_id, async () => {
    if (props.topPlayers && props.topPlayers.length > 0) {
        await loadPlayerBadges()
    }
})

function getDefaulteAvatar(): string {
    return new URL('../../assets/xinJi/images/leaderboard/avatar.png', import.meta.url).href
}

function getInfoBadge(imageName: string) {
    return new URL(`../../assets/xinJi/images/leaderboard/InfoBadge/${imageName}`, import.meta.url).href
}
</script>

<style lang="less" scoped>
    .show {
        display: flex;
        justify-content: center;
        align-items: end;
        
        .show-item {
            width: (428px / 3);
            height: (844px / 3);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-position: center;
            margin: 0 30px;
            position: relative;
            align-self: flex-start;
            text-shadow: 0px 4px 24px rgba(0, 0, 0, 0.93);
            text-align: center;
            box-sizing: border-box;

            .decoration {
                position: absolute;
                top: 38px;
                left: -5px;
                z-index: 1000;
                width: (460px / 3);
                height: (330px / 3);
            }

            .show-number,
            .show-name,
            .show-score {
                font-size: 16px;
                background: linear-gradient(180deg, #FCE57E 0%, #C9984A 100%);
                -webkit-background-clip: text; 
                background-clip: text;
                color: transparent;
            }

            .show-number {
                font-size: 20px;
                font-weight: bold;
            }

            .show-grade {
                display: flex;
                justify-content: center;
                height: 30px;
                color: #fff;

                .show-badge {
                    width: 30px;
                    height: 30px;
                }

                span {
                    margin: 0;
                    height: 100%;
                    width: 70px;
                    line-height: 30px;
                }
            }

            .show-score {
                color: #fff;
            }

            &:nth-child(1) {
                order: 2;
                padding-top: 145px;

                .show-avatar {
                    height: 99px;
                    width: 99px;
                    position: absolute;
                    top: 36px;
                    left: 22px;
                    clip-path: polygon(35% 0%, 67% 0%, 100% 19%, 100% 71%, 51% 103%, 0% 69%, 0% 21%);               
                }
            }

            &:nth-child(2) {
                order: 1;
                width: (455px / 3);
                height: (782px / 3);
                padding-top: 125px;

                .decoration {
                    top: 23px;
                    left: 0px;
                    height: (309px / 3);
                }

                .show-avatar {
                    height: 74px;
                    width: 74px;
                    position: absolute;
                    top: 28px;
                    left: 38px;
                    clip-path: polygon(35% 2%, 67% 2%, 101% 27%, 100% 89%, 51% 127%, 2% 87%, 0% 26%); 
                }

                .show-name {
                    margin-bottom: 10px;
                }
            }

            &:nth-child(3) {
                order: 3;
                width: (442px / 3);
                height: (784px / 3);
                padding-top: 125px;

                .decoration {
                    top: 20px;
                    left: 0px;
                    width: (448px / 3);
                    height: (310px / 3);
                }

                .show-avatar {
                    height: 74px;
                    width: 74px;
                    position: absolute;
                    top: 28px;
                    left: 38px;
                    clip-path: polygon(31% 3%, 67% 3%, 99% 24%, 99% 83%, 37% 127%, -3% 85%, 0% 25%); 
                }

                .show-name {
                    margin-bottom: 10px;
                }
            }
        }
    }
</style>